<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>撩课学院-IT人的自我成长社区</title>
		<link rel="shortcut icon" href="./imgs/lk_favicon.ico" type="image/x-icon">

		<link href="./lib/bootstrap/css/bootstrap.css" rel="stylesheet">
		<link rel="stylesheet" href="./css/global.css">
		<link rel="stylesheet" href="./css/index.css">

	</head>
	<body>

		<!-- 头部区域 -->
		<div class="lk_header">
			<!-- 顶部通栏 -->
			<div class="lk_topbar hidden-xs hidden-sm text-muted">
				<div class="container">
					<div class="row">
						<div class="topbar1 col-md-2">
							<a class="text-muted" href="">
								<i class="lk-icon-phone"></i>
								<span>关注微信号</span>
								<i class="glyphicon glyphicon-triangle-bottom" style="font-size: 12px;"></i>
								<img src="./imgs/ewm_xzh.jpg" width="130px">
							</a>
						</div>
						<div class="topbar2 col-md-5">
							<i class="lk-icon-tel"></i>
							<span>8888-555-6666（服务时间：9:00-21:00）</span>
						</div>
						<div class="topbar3 col-md-2">
							<a class="text-muted" href="">校企合作</a>
							<a class="text-muted" href="">培训师</a>
						</div>
						<div class="topbar4 col-md-3">
							<a class="btn btn-info btn-sm" href="">免费注册</a>
							<a class="btn btn-default btn-sm" href="javascript:void(0)" data-toggle="modal" data-target="#lk_login">立即登录</a>
						</div>
					</div>
				</div>
			</div>
			<!-- 导航栏 -->
			<nav class="lk_nav navbar navbar-default navbar-static-top">
			  <div class="container">
			    <div class="navbar-header">
			      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#lk_nav">
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			      </button>
			      <a class="navbar-brand" href="#">
							<img src="./imgs/lk_logo_sm.png" width="180px">
						</a>
			    </div>
			
			    <div class="collapse navbar-collapse" id="lk_nav">
			      <ul class="nav navbar-nav">
			        <li class="active"><a href="#">关于我们</a></li>
			        <li><a href="#">课程介绍</a></li>
			        <li><a href="#">热门课程</a></li>
			        <li><a href="#">名师授课</a></li>
			        <li><a href="#">课堂互动</a></li>
			        <li><a href="#">联系我们</a></li>
			      </ul>
						
						<ul class="nav navbar-nav navbar-right hidden-sm hidden-xs">
						   <li><a href="#">个人中心</a></li>
						</ul>
			    </div>
			  </div>
			</nav>
			<!-- 轮播图 -->
			<div id="lk_carousel" class="carousel slide" data-ride="carousel">
				
			  <ol class="carousel-indicators">
			    <li data-target="#lk_carousel" data-slide-to="0" class="active"></li>
			    <li data-target="#lk_carousel" data-slide-to="1"></li>
			    <li data-target="#lk_carousel" data-slide-to="2"></li>
			  </ol>
				
			  <div class="carousel-inner">
			    <div class="item active" data-img-sm="./imgs/slide_01_640x340.jpg" data-img-lg="./imgs/slide_01_2000x410.jpg">
			      <a href="#"></a>
			    </div>
					<div class="item" data-img-sm="./imgs/slide_02_640x340.jpg" data-img-lg="./imgs/slide_02_2000x410.jpg">
					  <a href="#"></a>
					</div>
					<div class="item" data-img-sm="./imgs/slide_03_640x340.jpg" data-img-lg="./imgs/slide_03_2000x410.jpg">
					  <a href="#"></a>
					</div>
			  </div>
			
			  <a class="left carousel-control" href="#lk_carousel" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#lk_carousel" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
		</div>


		<!-- 主体区域 -->
		<div class="lk_main">
			<!-- 关于我们 -->
			<div class="lk_about container hidden-xs hidden-sm">
				<!-- 标题 -->
				<div class="title text-center">
					<h1><strong>关于我们</strong></h1>
					<img src="./imgs/star.png" class="img-responsive center-block">
				</div>
				<!-- 主要内容 -->
				<div class="lk_container">
					<div class="row">
						<div class="col-md-8">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut repellat magnam quaerat sapiente aperiam quasi voluptatum. Quae totam hic autem ipsa in sunt pariatur ab perferendis dignissimos? Nisi deleniti molestias.</p>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloribus maiores ullam reiciendis sed reprehenderit sit facere veniam possimus quisquam odit laborum et nobis dignissimos perspiciatis sapiente ex odio error.</p>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum iusto pariatur itaque perspiciatis iste quidem aspernatur alias accusantium recusandae deserunt minus eos necessitatibus atque ducimus deleniti consectetur voluptatum officiis molestiae!</p>
						</div>
						<div class="col-md-4">
							<img src="./imgs/team.png" class="img-responsive img-rounded">
						</div>
					</div>
				</div>
			</div>
			<!-- 产品特色 -->
			<div class="lk_tabs">
				<div class="container">
				<div class="row">
				  <ul class="nav nav-tabs">
				    <li class="active"><a href="#product1" data-toggle="tab">在线大学</a></li>
				    <li><a href="#product2" data-toggle="tab">会员专享</a></li>
				    <li><a href="#product3" data-toggle="tab">优质视频</a></li>
				    <li class="pull-right hidden-xs hidden-sm"><a href="#">更多<i class="glyphicon glyphicon-menu-right text-muted" style="font-size: 12px;"></i></a></li>
				  </ul>
				
				  <div class="tab-content">
				    <div class="tab-pane fade in active" id="product1">
							<div class="col-md-8">
								<!-- 第一部分 -->
								<div class="pd_one_1 media">
								  <div class="media-left">
								     <img class="media-object" src="./imgs/ewm_xzh.jpg" width="140px">
								  </div>
								  <div class="media-body">
								    <h4 class="text-muted">更多资讯欢迎</h4>
								    <h4 class="text-muted">关注撩课学院</h4>
								  </div>
								</div>
								<!-- 第二部分 -->
								<ol class="pd_one_2 breadcrumb lead">
								  <li><a href="#">HTML5+全栈</a></li>
								  <li><a href="#">Python+人工智能</a></li>
								  <li><a href="#">JavaEE</a></li>
								  <li><a href="#">Go语言+区块链</a></li>
								</ol>
								<!-- 第三部分 -->
								<h1 class="pd_one_3 text-success">
									欢迎来到IT人的在线大学---
									<strong class="lk_color">撩课学院</strong>
								</h1>
								<!-- 第四部分 -->
								<div class="pd_one_4">
									<a href="#" class="btn btn-primary btn-lg" style="margin-right: 20px;">课程咨询</a>
									<a href="javascript:void(0)" class="btn btn-default btn-lg">了解更多</a>
								</div>
							</div>
							<div class="col-md-4 hidden-xs hidden-sm">
								<img src="imgs/iphoneX.png" class="img-responsive">
							</div>
						</div>
				    <div class="tab-pane fade" id="product2">
							<div class="col-md-4">
								<img src="./imgs/iphoneX2.png" class="img-responsive hidden-xs hidden-sm">
							</div>
							<div class="col-md-8" style="padding: 50px 10px;">
								<h2 class="lk_color_bold">撩课学院会员</h2>
								<p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error adipisci minus provident accusantium cumque alias molestias veniam a eius fugit. Eos harum quis perspiciatis laudantium asperiores magni ex pariatur beatae?</p>
							</div>
						</div>
				    <div class="tab-pane fade" id="product3">
							<div class="col-md-6">
								<h1>
									<strong class="lk_color_bold">案例驱动-体系贯穿-全面系统</strong>
								</h1>
								<h3>10-15分钟的视频
									<span class="text-warning">知识点拆分讲解</span>
								</h3>
								<h4 class="text-muted lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam tempore ea facilis repudiandae sint veritatis enim quidem numquam et sed! Iste temporibus odit minus repellendus debitis nulla quibusdam molestiae animi.</h4>
								<div class="badge">
									已更新3000+视频 | 100000+人订阅
								</div>
							</div>
							<div class="col-md-6 hidden-xs hidden-sm">
								<img src="./imgs/macBook.png" class="img-responsive">
							</div>
						</div>
				  </div>
				</div>
				</div>
			</div>
			<!-- 热门课程 -->
			<div class="lk_hot">
				<!-- 标题 -->
				<div class="title text-center">
					<h1><strong>热门课程</strong></h1>
					<img src="./imgs/star.png" class="img-responsive center-block">
				</div>
				<!-- 内容 -->
				<div class="container">
					<div class="row">
						<div class="col-md-6">
							<div class="media">
							  <div class="media-left">
							    <a href="#">
							      <img class="media-object img-responsive img-circle img-thumbnail" src="./imgs/lnj.png" width="100px">
							    </a>
							  </div>
							  <div class="media-body">
							    <h4 class="media-heading">
										<span class="text-danger">【热】</span>
										从零开始玩转HTML5+跨平台
									</h4>
							    <h5 class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis id quod blanditiis atque ipsam aliquam error ratione iusto ad animi.</h5>
							  </div>
								<div class="media-right text-danger"><span class="badge">206节课</span></div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="media">
							  <div class="media-left">
							    <a href="#">
							      <img class="media-object img-responsive img-circle img-thumbnail" src="./imgs/yjh.png" width="100px">
							    </a>
							  </div>
							  <div class="media-body">
							    <h4 class="media-heading">
										<span class="text-danger">【热】</span>
										从零开始玩转HTML5+跨平台
									</h4>
							    <h5 class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis id quod blanditiis atque ipsam aliquam error ratione iusto ad animi.</h5>
							  </div>
								<div class="media-right text-danger"><span class="badge">206节课</span></div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="media">
							  <div class="media-left">
							    <a href="#">
							      <img class="media-object img-responsive img-circle img-thumbnail" src="./imgs/wzs.png" width="100px">
							    </a>
							  </div>
							  <div class="media-body">
							    <h4 class="media-heading">
										<span class="text-danger">【热】</span>
										从零开始玩转HTML5+跨平台
									</h4>
							    <h5 class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis id quod blanditiis atque ipsam aliquam error ratione iusto ad animi.</h5>
							  </div>
								<div class="media-right text-danger"><span class="badge">206节课</span></div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="media">
							  <div class="media-left">
							    <a href="#">
							      <img class="media-object img-responsive img-circle img-thumbnail" src="./imgs/gxq.jpg" width="100px">
							    </a>
							  </div>
							  <div class="media-body">
							    <h4 class="media-heading">
										<span class="text-danger">【热】</span>
										从零开始玩转HTML5+跨平台
									</h4>
							    <h5 class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis id quod blanditiis atque ipsam aliquam error ratione iusto ad animi.</h5>
							  </div>
								<div class="media-right text-danger"><span class="badge">206节课</span></div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="media">
							  <div class="media-left">
							    <a href="#">
							      <img class="media-object img-responsive img-circle img-thumbnail" src="./imgs/lnj.png" width="100px">
							    </a>
							  </div>
							  <div class="media-body">
							    <h4 class="media-heading">
										<span class="text-danger">【热】</span>
										从零开始玩转HTML5+跨平台
									</h4>
							    <h5 class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis id quod blanditiis atque ipsam aliquam error ratione iusto ad animi.</h5>
							  </div>
								<div class="media-right text-danger"><span class="badge">206节课</span></div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="media">
							  <div class="media-left">
							    <a href="#">
							      <img class="media-object img-responsive img-circle img-thumbnail" src="./imgs/lnj.png" width="100px">
							    </a>
							  </div>
							  <div class="media-body">
							    <h4 class="media-heading">
										<span class="text-danger">【热】</span>
										从零开始玩转HTML5+跨平台
									</h4>
							    <h5 class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis id quod blanditiis atque ipsam aliquam error ratione iusto ad animi.</h5>
							  </div>
								<div class="media-right text-danger"><span class="badge">206节课</span></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 友情链接 -->
			<div class="lk_link">
				<!-- 标题 -->
				<div class="title text-center">
					<h1><strong>友情链接</strong></h1>
					<img src="./imgs/star.png" class="img-responsive center-block">
				</div>
				<ul class="container">
					<li><a href=""><img src="./imgs/airbnb-logo.png" ></a></li>
					<li><a href=""><img src="./imgs/facebook-logo.png" ></a></li>
					<li><a href=""><img src="./imgs/google-logo.png" ></a></li>
					<li><a href=""><img src="./imgs/ibm-logo.png" ></a></li>
					<li><a href=""><img src="./imgs/paypal-logo.png" ></a></li>
					<li><a href=""><img src="./imgs/swift-logo.png" ></a></li>
					<li><a href=""><img src="./imgs/walmart-logo.png" ></a></li>
				</ul>
			</div>
		</div>

		<!-- 尾部区域 -->
		<div class="lk_footer">
			<div class="container">
				<div class="row">
					<div class="footer_1 col-md-4">
							<ul class="clearfix">
								<li><a href="">关于我们</a></li>
								<li><a href="">课程介绍</a></li>
								<li><a href="">热门课程</a></li>
								<li><a href="">名师授课</a></li>
								<li><a href="">课堂互动</a></li>
								<li><a href="">联系我们</a></li>
							</ul>
					</div>
					<div class="footer_2 col-md-4">
						<h5>公司地址：上海市松江区松江大学</h5>
						<h5>联系电话：18888888888</h5>
						<h5>电子邮箱：2504906247@qq.com</h5>
					</div>
					<div class="footer_3 col-md-4">
						联系我们：
						<a href="" data-toggle="tooltip" data-placement="top" title="关注微信公众号"><img src="./imgs/weixin-h.png" width="50px"></a>
						<a href="" data-toggle="tooltip" data-placement="top" title="关注新浪微博"><img src="./imgs/xinlang-h.png" width="50px"></a>
					</div>
				</div>
			</div>
		</div>

		<!-- 登录模态框 -->
		<div class="modal fade" id="lk_login" tabindex="-1">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"></button>
		        <h4 class="modal-title" id="myModalLabel">登录</h4>
		      </div>
		      <div class="modal-body">
		        <form action="" method="" class="form-horizontal">
							
							<div class="form-group">
								<label>用户名：</label>
								<input class="form-control" type="text" name="account" value="" placeholder="请输入账号或手机号"/>
							</div>
							
							<div class="form-group">
								<label>密码：</label>
								<input class="form-control" type="password" name="pwd" value="" placeholder="请输入密码"/>
							</div>
							
		        </form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-primary">登录</button>
		      </div>
		    </div>
		  </div>
		</div>
	
		<script src="./lib/jquery/jquery.js"></script>
		<script src="./lib/bootstrap/js/bootstrap.js"></script>
		<script src="./js/global.js"></script>
		<script src="./js/index.js"></script>
	</body>
</html>
